<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="180px">
      <el-tabs tab-position="left">
        <el-tab-pane label="微信公众号">
          <el-row>
            <el-col>
              <el-form-item label="消费成功通知ID" prop="wxOaPaySuccessId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaPaySuccessId" placeholder="请输入消费成功通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">51006</el-link>
                    <span class="mgl5">(模板字段：订单编号，消费项目，消费时间，消费金额，客户名称)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col>
              <el-form-item label="订单已取消通知ID" prop="wxOaOrderCancelId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaOrderCancelId" placeholder="请输入订单已取消通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">45559</el-link>
                    <span class="mgl5">(模板字段：用户名称，订单金额，取消时间，取消原因，订单号)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="订单已超时通知ID" prop="wxOaOrderOvertimeId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaOrderOvertimeId" placeholder="请输入订单已超时通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">51052</el-link>
                    <span class="mgl5">(模板字段：预定客户，订单金额，下单时间，订单号)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col>
              <el-form-item label="项目消费成功通知ID" prop="wxOaRewardId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaRewardId" placeholder="请输入项目消费成功通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">50880</el-link>
                    <span class="mgl5">(模板字段：客户名称，消费项目，消费时间)（备注：客户打赏通知）</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- <el-row>
            <el-col>
              <el-form-item label="新订单待受理通知ID" prop="wxOaOrderNewId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaOrderNewId" placeholder="请输入新订单待受理通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">43262</el-link>
                    <span class="mgl5">(模板字段：订单金额，下单项目，下单用户，时间，订单)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="订单已开始通知ID" prop="wxOaOrderStartId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaOrderStartId" placeholder="请输入订单已开始通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">43122</el-link>
                    <span class="mgl5">(模板字段：订单状态，服务项目，开始时间，订单)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="订单完成通知ID" prop="wxOaOrderFinishId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaOrderFinishId" placeholder="请输入订单完成通知ID" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">44703</el-link>
                    <span class="mgl5">(模板字段：项目名称，完成时间，操作人员，订单)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="店员入驻审核提醒" prop="wxOaApplyId">
                <div class="flex-align-center">
                  <el-input v-model="form.wxOaApplyId" placeholder="请输入店员入驻审核提醒" maxlength="200" show-word-limit
                    class="width500" />
                  <div class="font-14 dy-font-color m-l-10 mgl10 flex">
                    <span class="mgl5">模板编号：</span>
                    <el-link type="primary" :underline="false">63738</el-link>
                    <span class="mgl5">(模板字段：申请用户，申请时间)</span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-tab-pane>
        <!-- <el-tab-pane label="微信小程序">微信小程序</el-tab-pane>
        <el-tab-pane label="QQ小程序">QQ小程序</el-tab-pane>
        <el-tab-pane label="抖音小程序">抖音小程序</el-tab-pane>
        <el-tab-pane label="快手小程序">快手小程序</el-tab-pane> -->
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="reset">重 置</el-button>
    </div>
  </div>
</template>

<script>

import { getConfigMessage, saveConfigMessage } from "@/api/market/configMessage";
export default {
  name: 'ConfigMessage',
  components: {

  },
  data() {
    return {
      // 表单参数
      form: {
        shopId: "",
        wxOaPaySuccessId: "",
        wxOaOrderNewId: "",
        wxOaOrderStartId: "",
        wxOaOrderFinishId: "",
        wxOaOrderCancelId: "",
        wxOaRewardId: "",
        wxOaOrderOvertimeId: "",
        wxOaApplyId: "",
      },
      // 表单校验
      rules: {
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let shopId = '';
      if (process.env.NODE_ENV === 'development') {
        shopId = 'haidiyao'
      } else {
        shopId = window.location.hostname.split(".")[0];
      }
      getConfigMessage({ shopId: shopId }).then(response => {
        let p = { ...this.form }
        this.form = { ...p, ...response.data }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        shopId: "",
        wxOaPaySuccessId: "",
        wxOaOrderNewId: "",
        wxOaOrderStartId: "",
        wxOaOrderFinishId: "",
        wxOaOrderCancelId: "",
        wxOaRewardId: "",
        wxOaOrderOvertimeId: "",
        wxOaApplyId: "",
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form))
          if (process.env.NODE_ENV === 'development') {
            params.shopId = 'haidiyao'
          } else {
            params.shopId = window.location.hostname.split(".")[0];
          }
          saveConfigMessage(params).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>

.width500 {
  width: 500px;
}</style>
